<template>
  <div>{{msg}}</div>
<!--  slot插槽调用-->
  <SidebarSon>
<!--    如果没声明就是用默认值即缺省-->
<!--    使用子组件插槽的数据：缺省情况下-->
<!--    v-slot:default="parent"中的parent自定义命名
    content是字组件中:content="article"的绑定名
    title是子组件中article的json数组的子类
-->
    <template v-slot:default="parent">
      <p>{{name}}-这是缺省插槽--{{parent.content.title}}</p>
    </template>

  </SidebarSon>
  <SidebarSon>
    <!--  指定具名插槽-->
    <!--    使用子组件插槽的数据：具名插槽情况下-->
    <template v-slot:button="">
      <p>这是具名为button的插槽</p>
    </template>
    <template v-slot:aHref>
      <p>这是具名为aHref的插槽</p>
    </template>
  </SidebarSon>
  <SidebarSon>
    <!--  指定具名插槽-->
<!--    v-slot:default="parentTwo"中的parentTwo自定义命名
    bc是字组件中:bc="article"的绑定名
    title是子组件中article的json数组的子类
-->
    <template v-slot:button="parentTwo">
      <p>这是具名为button的插槽--{{parentTwo.bc.title}}</p>
    </template>
<!--    没有具名的为缺省-->
<!--    v-slot:default="parentOne"中的parentOne自定义命名
    content是字组件中:content="article"的绑定名
    title是子组件中article的json数组的子类
-->
    <template v-slot:default="parentOne">
      <p>333333-这是缺省插槽--{{parentOne.content.title}}</p>
    </template>
  </SidebarSon>
</template>

<script>
import SidebarSon from "./SidebarSon";
export default {
  name: "Sidebar",
  data(){
    return{
      msg:'右侧主要内容',
      name:'使用父类的数据的插槽'
    }
  },
  components:{
    SidebarSon
  }
}
</script>

<style scoped>
  html,body,*{
    font-size: 8px;
  }
</style>